<template>
  <el-dialog
    title="企微号信息"
    :visible.sync="$attrs.visable"
    width="600px"
    :before-close="handleClose"
  >
    <div class="my_infobox">
      <div class="flexcolumn justifycenter mb-40">
        <div class="avatarbox">
          <img :src="form.headImgUrl" alt="" />
        </div>
        <div class="commhover uploadimgbtn flexcenter p_relative">
            上传头像
            <input type="file" name="" id="" class="uploadimg" accept="image/*" @change="chooseUpload">
        </div>
      </div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="56px"
        label-position="left"
      >
        <el-form-item label="姓名：" prop="nickname">
          <el-input v-model="form.nickname" maxlength="20" show-word-limit />
          <div class="c_text3 line_h_24">
            托管企微号列表里显示的是姓名，仅内部成员可见
          </div>
        </el-form-item>
        <el-form-item label="别名：" prop="name">
          <el-input v-model="form.name" maxlength="20" show-word-limit />
        </el-form-item>
        <el-form-item label="实名：" prop="name">
          <el-input v-model="form.name" disabled />
          <div class="c_text3 line_h_24">
            对外信息显示可以选择实名或者别名，目前系统暂不支持设置，需前往企业微信手机端设置
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { isOverSize } from '@/utils/validate';
export default {
  data() {
    return {
      form: {},
      rules: {},
    };
  },
  props: {
    row: {
      type: Object,
      default: null,
    },
  },
  created(){
    this.form.headImgUrl = this.row.headImgUrl;
    this.form.nickname = this.row.nickname;
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    chooseUpload(event) {
      var file = event.currentTarget.files[0];
      if (isOverSize(file.size, 5)) {
        this.$message.warning("大小不能超过5MB");
        return;
      }
      console.log(file);
      // var formData = new FormData();
      // formData.append("file", file);
      // formData.append("uid",localStorage.getItem('uid'));
      // uploadPhoto(formData).then((res) => {
      //   if (res.code == 1) {
      //     // console.log('图片：',res.data);
      //     this.$message.success("上传成功");
      //     let url = res.data.replace("\\", "/");
      //     this.form.photo = process.env.VUE_APP_BASE_API + "/" + url;
      //     document.getElementById("pageData").value = null;
      //   }
      // });
    },
    
    // handleNodeClick(data) {
    //   //   console.log('data:',data)
    //   this.changeData(this.groupList);
    //   data.checked = true;
    // },

    // changeData(data) {
    //   data.forEach((item) => {
    //     item.checked = false;
    //     if (item.children && item.children.length)
    //       this.changeData(item.children);
    //   });
    // },

    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.my_infobox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.custom-node {
  border-radius: 4px;
  &.active {
    background-color: #ebf2ff;
  }
}
.avatarbox {
  width: 100px;
  height: 100px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.uploadimgbtn {
  height: 32px;
  width: 100px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
}
.uploadimg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
</style>